<template>
    <div class="hotContentList">
        <ul v-if="shoplist.length>0">
            <li v-for="(shop,index) in shoplist" :key="index">
                <a class="showList">
                    <div class="showList-left">
                        <img :src="shop.hd_thumb_url">
                    </div>
                    <div class="showList-right">
                        <h1>{{shop.goods_name}}</h1>
                        <div class="showList-txt">
                            <span class="showList-nub">￥
                                <span class="txt-nub">{{shop.normal_price}}</span>
                                <span class="txt-sales">{{shop.sales_tip}}</span>
                            </span>
                            <span class="showList-user">
                                <img :src="user.avatar" v-for="(user,index1) in shop.bubble" :key="index1">
                            </span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        name: "HotList",
        computed:{
            ...mapState(['shoplist'])
        },

    }
</script>

<style scoped lang="stylus">
    .hotContentList
        padding 0 5px
        margin-bottom 50px
        li
            background-color #ff
            margin-bottom 8px
            padding 6px
            border-radius 3px
            .showList
                display flex
                .showList-left
                    margin-right 8px
                    flex 0.8
                    img
                        width: 100%
                        border-radius 2px
    .showList-right
        flex 1
        position relative
        h1
            font-size 14px
            color #000
            line-height 20px
            height 40px
            overflow hidden
            padding-top  8px
    .showList-txt
        position absolute
        left 0
        bottom 0
        padding-bottom 8px
        font-size 12px
        display flex
        flex-direction row
        align-items center
        justify-content space-between
        .showList-nub
            color red
            display flex
            align-items center
            flex 5
        .txt-nub
            font-size 18px!important
            font-weight bold
            margin-right 3px
        .txt-sales
            color #686868!important

    .showList-user
        display flex
        align-items center
        justify-content center
        flex 2
        img
            width 40%
            border 1px solid #fff
            border-radius 50%
        img:nth-child(2)
            margin-left -5px
</style>